<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            background-color: rgb(240, 240, 240);
        }

        * {
            margin: 0;
        }

        a {
            text-decoration: none;
        }

        #top_right span {
            color: white;
            font-size: 12px;
            font-weight: 900;
        }

        .time {
            font-size: 13px;
            color: #999;
        }

        .bottom {
            margin-top: 13px;
            line-height: 12px;
        }

        .button {
            padding: 0;
            float: right;
        }

        .image {
            width: 100%;
            display: block;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        #bottom-intro > div {
            width: 300px;
            box-shadow: 4px 4px 3px 0 rgba(150, 150, 150, 0.8);
            border-radius: 4px;
            float: right;
            margin-left: 100px;
        }

        #bottom-intro img {
            width: 100%;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px
        }

        #bottom-intro > div > div {
            width: 100%;
            padding: 10px
        }

        #bottom-intro ul {
            list-style-type: none;
            padding: 0 5px 5px 0;
        }

        #bottom-intro li {
            margin-bottom: 5px;
        }

        #bottom-intro i {
            color: rgb(150, 150, 150);
            margin-right: 5px;
        }

        #bottom-intro > div > div > ul > li > span {
            color: rgb(130, 110, 90);
            font-size: 13px;
        }

        #bottom-intro a > span {
            width: 200px;
            height: 30px;
            display: block;
            padding: 5px;
        }

        #bottom-intro a > span {
            color: rgb(130, 110, 90);
            font-size: 14px;
            font-weight: bold;
        }

        #bottom-intro a {
            margin-top: 20px;
            display: block;
            width: 300px;
            height: 30px;

            position: relative;
        }

        #bottom-svg1 {
            width: 70px;
            height: 30px;
            position: absolute;
            right: 160px;
            bottom: 1px;
        }

        #bottom-intro img {
            width: 100%;
            height: 200px
        }

        #right_appbar {
            width: 300px;
            height: 100%;
            position: fixed;
            z-index: 5;
            background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.1));
        }

        #right_appbar ul {
            list-style: none;
        }

        #right_appbar ul > li {
            margin: 10px 0 20px 0
        }

        #right_appbar ul > li a {
            color: white;
        }

        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    </style>
</head>
<body>
<div id="app">
    <!--顶部导航栏开始-->
    <div style="width:100%;height:170px;background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.1));position: fixed;z-index: 5">
        <div style="width:40px;height:25px">
            <a href="javascript:void (0)" @click="show()">
                <svg style="fill:rgb(255,255,255);margin:50px 0 0 50px" width="40" height="25">
                    <rect width="40" height="3"></rect>
                    <rect width="40" height="3" y="11"></rect>
                    <rect width="40" height="3" y="22"></rect>
                </svg>
            </a>
        </div>
        <!--log开始-->
        <div style="text-align: center;position: relative;left:700px;bottom: 20px;z-index: 0;width:200px">
            <img src="../imgs/logo2.png" style="width:100%">
        </div>
        <!--log结束-->
        <!--右上角业务功能开始-->
        <div id="top_right" style="float:right;width:265px;height:70px;position: absolute;top:20px;right:30px">
            <a href="" style="margin: 0 20px 20px 10px"><i class="el-icon-user-solid"
                                                           style="color:white;margin-right: 5px"></i><span>用户注册</span></a>
            <a href="" style="margin: 0 20px 20px 0"><i class="el-icon-user"
                                                        style="color:white;margin-right: 5px"></i><span>登录</span></a>
            <a href="" style="margin: 0 20px 20px 0"><i class="el-icon-document-copy"
                                                        style="color:white;margin-right: 5px"></i><span>订单查询</span></a>
        </div>
        <!--右上角业务功能结束-->
    </div>
    <!--顶部导航栏结束-->
    <!--右侧导航栏开始-->
    <div id="right_appbar">
        <a href="javascript:void(0)" style="display: inline-block;width:30px;height:30px;margin:50px">
            <svg style="width:100%;height:100%">
                <path d="M0 0 L26 30 L30 30 L4 0 Z" fill="white"/>
                <path d="M30 0 L4 30 L0 30 L26 0 Z" fill="white"/>
            </svg>
        </a>
        <p><a href=""></a></p>
        <div style="margin-left: 50px">
            <ul style="color:white">
                <li><p><a href="/">首页</a></p></li>
                <li><p><a href="">关于我们</a></p></li>
                <li><p><a href="">客房介绍</a></p></li>
                <li><p><a href="">餐饮服务</a></p></li>
                <li><p><a href="">会议设施</a></p></li>
                <li><p><a href="">康体设施</a></p></li>
                <li><p><a href="">婚礼宴会</a></p></li>
                <li><p><a href="">酒店新闻</a></p></li>
                <li><p><a href="">酒店促销</a></p></li>
                <li><p><a href="">图片之旅</a></p></li>
                <li><p><a href="">联系我们</a></p></li>
                <li><p><a href="">周边配套</a></p></li>
            </ul>
        </div>
    </div>
    <!--右侧导航栏结束-->
    <!--轮播图开始-->
    <template>
        <el-carousel height="900px" style="position: relative">
            <el-carousel-item>
                <img src="../imgs/3-1.jpg" width="100%" height="100%">
            </el-carousel-item>
            <el-carousel-item>
                <img src="../imgs/3-2.jpg" width="100%" height="100%">
            </el-carousel-item>
            <el-carousel-item>
                <img src="../imgs/3-3.jpg" width="100%" height="100%">
            </el-carousel-item>
            <el-carousel-item>
                <img src="../imgs/3-4.jpg" width="100%" height="100%">
            </el-carousel-item>
            <el-carousel-item>
                <img src="../imgs/3-5.jpg" width="100%" height="100%">
            </el-carousel-item>
            <el-carousel-item>
                <img src="../imgs/3-6.jpg" width="100%" height="100%">
            </el-carousel-item>
        </el-carousel>
    </template>
    <!--轮播图结束-->
    <!--酒店介绍-->
    <div style="width:700px;height:250px;position: absolute;right:0px; top:500px;color:white;background-color:rgba(200,200,200,0.3);z-index:5">
        <p style="width:600px;height:180px;margin:10px auto;text-indent:30px">
            酒店于2015年4月18日开业，拥有195间装饰极具现代感、宽敞豪华的
            客房和套房，设有西餐厅、多功能会议厅、酒吧、健身房、网球场、商务
            服务、大型停车场等服务设施一应俱全。现代简约、宽敞的豪华客房面积
            达到42平方米以上，配备舒适的品牌睡床、无线和宽带上网、卫星电视等
            设施。园林化的休憩空间、品质化的消费环境、个性化的悉心服务、尽善尽
            美的服务设施，是休闲商务、购物娱乐、旅游度假的首选之地。酒店致力于
            时刻为每一位宾客提供全方位殷勤服务，独享华美达品牌的服务和尊贵。乐
            居于酒店，您可安心享受便捷和舒适的商务之旅。
        </p>
    </div>
    <div style="width:100%;height:100px;background-color: rgba(193,155,118,0.4);padding: 10px 0 10px 0;box-sizing:border-box">
        <div style="width:100%;height:80px;background-color: rgba(240,240,240,1)"></div>
    </div>
    <!--酒店介绍结束-->
    <!--客房介绍-->
    <div style="width:1500px;height:500px;margin:50px auto;" id="bottom-intro">
        <div>
            <img src="../imgs/4-1.jpg">
            <div>
                <ul>
                    <li><i class="el-icon-caret-right"></i><span>42平米</span></li>
                    <li><i class="el-icon-caret-right"></i><span>带沙发的休息区</span></li>
                    <li><i class="el-icon-caret-right"></i><span>带椅子的办公桌</span></li>
                    <li><i class="el-icon-caret-right"></i><span>豪华单人床</span></li>
                    <li><i class="el-icon-caret-right"></i><span>46英寸的液晶平板电视</span></li>
                    <li><i class="el-icon-caret-right"></i><span>独立的浴室和卫生间</span></li>
                    <li><i class="el-icon-caret-right"></i><span>雨淋式淋浴间和独立浴缸</span></li>
                </ul>
                <a href="">
                    <span>产看详情</span>
                    <svg id="bottom-svg1">
                        <path d="M0 15 L30 15 L30 16 L0 16 Z" fill="#a68839"></path>
                        <path d="M25 20 L29 16 L30 16 L25 21 Z" fill="#a68839"></path>
                        <path d="M25 10 L29 15 L30 15 L25 9 Z" fill="#a68839"></path>
                    </svg>
                </a>
            </div>
        </div>
        <div>
            <img src="../imgs/4-6.jpg">
            <div>
                <ul>
                    <li><i class="el-icon-caret-right"></i><span>42平米</span></li>
                    <li><i class="el-icon-caret-right"></i><span>带沙发的休息区</span></li>
                    <li><i class="el-icon-caret-right"></i><span>带椅子的办公桌</span></li>
                    <li><i class="el-icon-caret-right"></i><span>豪华单人床</span></li>
                    <li><i class="el-icon-caret-right"></i><span>46英寸的液晶平板电视</span></li>
                    <li><i class="el-icon-caret-right"></i><span>独立的浴室和卫生间</span></li>
                    <li><i class="el-icon-caret-right"></i><span>雨淋式淋浴间和独立浴缸</span></li>
                </ul>
                <a href="">
                    <span>产看详情</span>
                    <svg id="bottom-svg1">
                        <path d="M0 15 L30 15 L30 16 L0 16 Z" fill="#a68839"></path>
                        <path d="M25 20 L29 16 L30 16 L25 21 Z" fill="#a68839"></path>
                        <path d="M25 10 L29 15 L30 15 L25 9 Z" fill="#a68839"></path>
                    </svg>
                </a>
            </div>
        </div>
        <div>
            <img src="../imgs/4-91.jpg">
            <div>
                <ul>
                    <li><i class="el-icon-caret-right"></i><span>42平米</span></li>
                    <li><i class="el-icon-caret-right"></i><span>带沙发的休息区</span></li>
                    <li><i class="el-icon-caret-right"></i><span>带椅子的办公桌</span></li>
                    <li><i class="el-icon-caret-right"></i><span>豪华单人床</span></li>
                    <li><i class="el-icon-caret-right"></i><span>46英寸的液晶平板电视</span></li>
                    <li><i class="el-icon-caret-right"></i><span>独立的浴室和卫生间</span></li>
                    <li><i class="el-icon-caret-right"></i><span>雨淋式淋浴间和独立浴缸</span></li>
                </ul>
                <a href="">
                    <span>产看详情</span>
                    <svg id="bottom-svg1">
                        <path d="M0 15 L30 15 L30 16 L0 16 Z" fill="#a68839"></path>
                        <path d="M25 20 L29 16 L30 16 L25 21 Z" fill="#a68839"></path>
                        <path d="M25 10 L29 15 L30 15 L25 9 Z" fill="#a68839"></path>
                    </svg>
                </a>
            </div>
        </div>
        <div style="margin-left:0px">
            <img src="../imgs/4-91.jpg">
            <div>
                <ul>
                    <li><i class="el-icon-caret-right"></i><span>42平米</span></li>
                    <li><i class="el-icon-caret-right"></i><span>带沙发的休息区</span></li>
                    <li><i class="el-icon-caret-right"></i><span>带椅子的办公桌</span></li>
                    <li><i class="el-icon-caret-right"></i><span>豪华单人床</span></li>
                    <li><i class="el-icon-caret-right"></i><span>46英寸的液晶平板电视</span></li>
                    <li><i class="el-icon-caret-right"></i><span>独立的浴室和卫生间</span></li>
                    <li><i class="el-icon-caret-right"></i><span>雨淋式淋浴间和独立浴缸</span></li>
                </ul>
                <a href="">
                    <span>产看详情</span>
                    <svg id="bottom-svg1">
                        <path d="M0 15 L30 15 L30 16 L0 16 Z" fill="#a68839"></path>
                        <path d="M25 20 L29 16 L30 16 L25 21 Z" fill="#a68839"></path>
                        <path d="M25 10 L29 15 L30 15 L25 9 Z" fill="#a68839"></path>
                    </svg>
                </a>
            </div>
        </div>
    </div>
    <!--客房介绍结束-->
    <!--酒店介绍-->
    <div style="width:100%;height:500px;background-color:#c9b291;position:relative">
        <svg style="height:5px;width:100%;fill:rgb(255,255,255)">
            <rect width="100%" height="5px"></rect>
        </svg>
        <p style="width:500px;color:white;margin:125px 30px 0px 200px;display: inline-block;
            text-indent:30px;font-size: 15px;">
            酒店拥有195 间装饰极具现代感、宽敞豪华的客房和套房。专属行政楼层、商
            务公寓、独立无烟楼层、蜜月客房等9种房型，每间客房均为大床或双人床配
            置，房内设有宽敞办公区、带全独立浴缸和独立淋浴间的超大浴室。酒店房间
            以温馨到家为装饰概念，突显雅致温馨。房间内配置落地全景玻璃窗，舒睡式
            床垫、时尚布艺沙发、大尺寸纯平液晶电视和高速上网连接，为宾客提供一个
            轻松舒适的入住体验和物超所值的温馨感受。
        </p>
        <img style="width:600px;float: right;position:absolute;right:50px;top:45px;
            box-shadow:-4px -4px 3px 0 rgba(10, 10, 10, 0.8)" src="/imgs/5-1.jpg" alt="">
        <img style="width:600px;float: right;position:absolute;right:30px;top:60px;
            box-shadow:-4px -4px 3px 0 rgba(50, 50, 50, 0.8)" src="/imgs/6-1.jpg" alt="">
        <svg style="height:5px;width:100%;fill:rgb(255,255,255);position:absolute;right:0;bottom:15px">
            <rect width="100%" height="5px"></rect>
        </svg>
    </div>
    <!--酒店介绍结束-->

    <!--酒店美食-->
    <div style="width:100%;height:500px;background-color:#f9f6f6;position:relative">
        <svg style="height:5px;width:100%;fill:rgb(255,255,255)">
            <rect width="100%" height="5px"></rect>
        </svg>
        <img style="width:600px;float: right;position:absolute;left:50px;top:45px;
            box-shadow:4px 4px 3px 0 rgba(10, 10, 10, 0.8)" src="/imgs/5-1.jpg" alt="">
        <img style="width:600px;float: right;position:absolute;left:30px;top:60px;
            box-shadow:4px 4px 3px 0 rgba(50, 50, 50, 0.8)" src="/imgs/6-1.jpg" alt="">

        <p style="width:500px;color:#6e6863;margin:100px 200px 0px 30px;display: inline-block;
            text-indent:30px;font-size: 15px;line-height: 30px;float: right">
            <span style="font-size: 12px;color:#b8a27d;">为您提供满意的美食</span><br>
            <span style="color:#6e5e4e;font-weight: normal;font-size: 25px">餐饮美食</span><br>
            酒店配备全日制自助餐厅、特色菜系中餐厅和休闲商务大堂吧。餐饮主营欧陆风味和特色自助餐等菜式。
            聘请五星餐饮制作经验的厨师亲手主理，独特的烹调方式和精致的制作手法，奉献一道道令味蕾惊艳的
            精品美食。无论商务宴请，亲朋宴席还是休闲小聚，精致餐饮出品和细心个性服务尽能迎合宾客不同口
            味的需求。<br>
            此外，酒店行政酒廊和送餐服务同样也可为在店的您提供各式咖啡、美饮、茶点、西式糕点和精致美食。
        </p>
        <svg style="height:5px;width:100%;fill:rgb(255,255,255);position:absolute;right:0;bottom:15px">
            <rect width="100%" height="5px"></rect>
        </svg>
    </div>
    <!--酒店美食结束-->
    <!--尾部-->
    <div style="width:100%;height:120px;background-color: #403f3f;padding-top: 50px">
        <p align="center" style="color:#dddada;">Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备
            11010802029572号</p>
        <p align="center" style="color:#dddada;">涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
        <p align="center" style="color:#dddada;">达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>

    </div>
    <!--尾部-->
</div>
<!--日历开始-->
<!--日历结束-->
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                enable: false,
                isShow: false,
            }
        },
        method: {
            show() {
                this.isShow = true;
            }
        }
    })
</script>
</html>